<!--conf
<sample in_favorites="true">
              <product version="1.5" edition="pro"/>
                     <modifications>
                            <modified date="070101"/>
                     </modifications>
               <sampledescription><![CDATA[Editable items is another popular dhtmlxTree feature. Sample demonstrates it in action.]]></sampledescription></sample>
 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title> Editable items</title>
</head>

<body>
	<h1>Editable items</h1>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	
<p>Double click on any item to edit it.  <br/>
Title is validated and can't be empty. To enable or disable nodes editing click on an appropriate action link. Any editing action report you perform will be rendered in the scrolling field.</p>    
	<table>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree" style="width:250px; height:220px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
			</td>
			<td rowspan="2" style="padding-left:25" valign="top">
				<a href="#" onClick="tree.enableItemEditor(true);">Enable editing</a><br>
				<a href="#" onClick="tree.enableItemEditor(false);">Disable editing</a><br>
                <input type='checkbox' id='a1231' onClick="au()" checked='true'>Click on selected
                <input type='checkbox' id='a1232' onClick="au()" checked='true'>Double click
                
                <div id='a_1' style='height:160px; overflow:auto;'></div>
			</td>
		</tr>
		
	</table>
    

	<script>
            function m_func(state,id,tree,value){
                document.getElementById("a_1").innerHTML+="<div>Item "+id+" - "+(state==0?"start editing":(state==1?"editor launched":(state==2?"editor closing":"editor closed")))+"</div>";

                if ((state==2)&&(value=="")) return false;
                return true;
            }

            function au(){
                tree.setEditStartAction(document.getElementById('a1231').checked,document.getElementById('a1232').checked);
            }
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);

			tree.setSkin('dhx_skyblue');
			tree.setImagePath("../../../codebase/imgs/dhxtree_skyblue/");
			tree.enableSmartXMLParsing(true);
            tree.enableDragAndDrop(true);
			tree.setDragBehavior('complex');
			tree.enableKeyboardNavigation(true)
            tree.enableItemEditor(true);
			tree.setOnEditHandler(m_func);
			tree.loadXML("../common/tree.xml");
	</script>


</body>
</html>
